<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码生成器 - 功能测试</title>
    <link rel="stylesheet" href="popup.css">
    <style>
        body {
            background: #f0f0f0;
            padding: 20px;
        }
        .test-container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .test-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        .test-note {
            background: #e3f2fd;
            border: 1px solid #2196f3;
            border-radius: 6px;
            padding: 15px;
            margin: 20px;
            color: #1976d2;
        }
        .test-note h4 {
            margin: 0 0 10px 0;
            color: #1565c0;
        }
        .test-content {
            padding: 0;
        }
        .usage-tips {
            background: #f8f9fa;
            padding: 20px;
            margin: 20px;
            border-radius: 8px;
            border-left: 4px solid #28a745;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            padding: 20px;
            background: #f8f9fa;
            margin: 20px;
            border-radius: 8px;
        }
        .feature-item {
            background: white;
            padding: 15px;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .feature-item h5 {
            color: #667eea;
            margin: 0 0 8px 0;
        }
        .feature-item p {
            margin: 0;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <div class="test-header">
            <h1>🔲 二维码生成器 - 功能测试</h1>
            <p>在安装Chrome扩展前，先体验完整功能</p>
        </div>

        <div class="test-note">
            <h4>📋 测试说明</h4>
            <p>这是插件的完整功能预览版本。在这里测试满意后，请按照README.md中的说明安装Chrome扩展版本。</p>
            <p><strong>主要区别：</strong> Chrome扩展版本支持"获取当前网址"功能，并且可以通过工具栏图标快速访问。</p>
        </div>

        <div class="test-content">
            <div class="container">
                <div class="content">
                    <!-- 左侧输入区域 -->
                    <div class="left-panel">
                        <div class="input-section">
                            <label for="textInput">输入内容:</label>
                            <textarea id="textInput" placeholder="请输入要生成二维码的内容..." rows="8">https://github.com/</textarea>
                            <div class="char-count">
                                <span id="charCount">0</span>/1000 字符
                            </div>
                        </div>
                        
                        <div class="quick-actions">
                            <button id="testUrl" class="action-btn">测试网址</button>
                            <button id="clearInput" class="action-btn">清空内容</button>
                        </div>
                    </div>
                    
                    <!-- 中间参数设置区域 -->
                    <div class="middle-panel">
                        <div class="settings-section">
                            <h3>参数设置</h3>
                            
                            <div class="setting-item">
                                <label for="qrSize">二维码尺寸:</label>
                                <select id="qrSize">
                                    <option value="200">200 x 200</option>
                                    <option value="300" selected>300 x 300</option>
                                    <option value="400">400 x 400</option>
                                    <option value="500">500 x 500</option>
                                </select>
                            </div>
                            
                            <div class="setting-item">
                                <label for="errorLevel">纠错级别:</label>
                                <select id="errorLevel">
                                    <option value="L">L (约7%)</option>
                                    <option value="M" selected>M (约15%)</option>
                                    <option value="Q">Q (约25%)</option>
                                    <option value="H">H (约30%)</option>
                                </select>
                            </div>
                            
                            <div class="setting-item">
                                <label for="foregroundColor">前景色:</label>
                                <input type="color" id="foregroundColor" value="#000000">
                            </div>
                            
                            <div class="setting-item">
                                <label for="backgroundColor">背景色:</label>
                                <input type="color" id="backgroundColor" value="#FFFFFF">
                            </div>
                            
                            <div class="setting-item">
                                <label for="margin">边距:</label>
                                <input type="range" id="margin" min="0" max="10" value="4">
                                <span id="marginValue">4</span>
                            </div>
                        </div>
                        
                        <button id="generateBtn" class="generate-btn">生成二维码</button>
                    </div>
                    
                    <!-- 右侧二维码展示区域 -->
                    <div class="right-panel">
                        <div class="qr-display">
                            <div id="qrcode"></div>
                            <div id="placeholder" class="placeholder">
                                <div class="placeholder-icon">📱</div>
                                <p>点击"生成二维码"按钮<br>查看生成的二维码</p>
                            </div>
                        </div>
                        
                        <div class="download-section">
                            <button id="downloadPng" class="download-btn" disabled>
                                <span>📥</span> 下载PNG
                            </button>
                            <button id="downloadSvg" class="download-btn" disabled>
                                <span>📥</span> 下载SVG
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="usage-tips">
            <h4>💡 使用提示</h4>
            <ul>
                <li><strong>快捷键：</strong> Ctrl+Enter 生成二维码，Esc 清空内容</li>
                <li><strong>颜色搭配：</strong> 确保前景色和背景色有足够对比度以便识别</li>
                <li><strong>尺寸选择：</strong> 网页使用建议300px，打印使用建议400px以上</li>
                <li><strong>纠错级别：</strong> 日常使用选M，打印或恶劣环境选Q或H</li>
            </ul>
        </div>

        <div class="features-grid">
            <div class="feature-item">
                <h5>🎨 丰富自定义</h5>
                <p>支持尺寸、颜色、纠错级别、边距等多种参数调节</p>
            </div>
            <div class="feature-item">
                <h5>💾 多格式下载</h5>
                <p>支持PNG位图和SVG矢量格式，满足不同使用需求</p>
            </div>
            <div class="feature-item">
                <h5>⚡ 实时更新</h5>
                <p>参数调整时自动重新生成，所见即所得</p>
            </div>
            <div class="feature-item">
                <h5>💾 设置记忆</h5>
                <p>自动保存用户偏好设置，下次使用更便捷</p>
            </div>
            <div class="feature-item">
                <h5>📱 响应式设计</h5>
                <p>完美适配桌面和移动设备，随时随地生成二维码</p>
            </div>
            <div class="feature-item">
                <h5>⌨️ 快捷操作</h5>
                <p>支持键盘快捷键，提高操作效率</p>
            </div>
        </div>
    </div>
    
    <script src="qrcode.min.js"></script>
    <script src="popup.js"></script>
    <script>
        // 重写获取当前URL的功能为测试功能
        function getCurrentPageUrl() {
            const testUrls = [
                'https://github.com/',
                'https://www.google.com/',
                'https://stackoverflow.com/',
                'https://developer.mozilla.org/',
                'mailto:example@email.com',
                'tel:+86-138-0013-8000'
            ];
            const randomUrl = testUrls[Math.floor(Math.random() * testUrls.length)];
            elements.textInput.value = randomUrl;
            updateCharCount();
            showNotification('已填入测试内容：' + randomUrl.substring(0, 30) + '...', 'info');
        }
        
        // 添加测试URL按钮功能
        document.addEventListener('DOMContentLoaded', function() {
            const testUrlBtn = document.getElementById('testUrl');
            if (testUrlBtn) {
                testUrlBtn.addEventListener('click', getCurrentPageUrl);
            }
        });
        
        // 页面加载时自动生成示例二维码
        window.addEventListener('load', function() {
            setTimeout(() => {
                if (elements.textInput.value.trim()) {
                    generateQRCode();
                }
            }, 500);
        });
    </script>
</body>
</html> 